<template>
  <div class="order">
    <a-card title="销售订单管理">
      <a-form class="formHeader">
        <a-row justify="start" :gutter="24">
          <a-col class="formHeader-criteria">
            <a-row :gutter="16">
              <a-col span="8">
                <a-form-item label="订单单别" label-col-flex="80px">
                  <a-input v-model="checkFrom.orderType" @keyup.enter="init" />
                </a-form-item>
              </a-col>
              <a-col span="8">
                <a-form-item label="订单单号" label-col-flex="80px">
                  <a-input v-model="checkFrom.orderId" @keyup.enter="init" />
                </a-form-item>
              </a-col>

              <a-col span="8">
                <a-form-item label="单据日期" label-col-flex="80px">
                  <a-date-picker v-model="checkFrom.orderDate" style="width: 100%" />
                </a-form-item>
              </a-col>

              <a-col span="8">
                <a-form-item label="客户" label-col-flex="80px">
                  <a-input v-model="checkFrom.customName" placeholder="请输入客户编号或名称" @keyup.enter="init" />
                </a-form-item>
              </a-col>
              <a-col span="8">
                <a-form-item label="业务人员" label-col-flex="80px">
                  <a-input v-model="checkFrom.userId" placeholder="请输入业务人员编号或名称" @keyup.enter="init" />
                </a-form-item>
              </a-col>
              <a-col span="8">
                <a-form-item label="交货日期" label-col-flex="80px">
                  <a-date-picker v-model="checkFrom.deliveryDate" style="width: 100%" />
                </a-form-item>
              </a-col>
            </a-row>
          </a-col>
          <a-col class="formHeader-btn">
            <a-space direction="vertical" :size="20">
              <a-button type="primary" @click="init">
                <template #icon>
                  <icon-search />
                </template>
                <template #default>查询</template>
              </a-button>
              <a-button @click="reset">
                <template #icon>
                  <icon-refresh />
                </template>
                <template #default>重置</template>
              </a-button>
            </a-space>
          </a-col>
        </a-row>
      </a-form>

      <formButtonGroup
        v-model:columns="columns"
        v-model:size="size"
        :config="config"
        :search-bar="searchBar"
        @refresh="init"
        @change-search-bar="changeSearchBar"
      >
        <template #leftboon>
          <a-space>
            <upload-excel></upload-excel>
            <a-button type="primary" @click="addSalesDetails">新增销售订单</a-button>
          </a-space>
        </template>
      </formButtonGroup>

      <vxe-table border :data="tabelList" show-footer :row-config="{ isHover: true }" size="mini">
        <vxe-column title="订单编号" align="center" width="130">
          <template #default="{ row }"> {{ row.tc001 }}-{{ row.tc002 }} </template>
        </vxe-column>
        <vxe-column title="客户名称" align="center" width="100">
          <template #default="{ row }"> {{ row.udf08 }} </template>
        </vxe-column>
        <vxe-column title="业务人员" align="center" width="100">
          <template #default="{ row }"> {{ row.tc006 }} </template>
        </vxe-column>
        <vxe-column title="出货工厂" align="center" width="100">
          <template #default="{ row }"> {{ row.tc007 }} </template>
        </vxe-column>
        <vxe-column title="订单金额" align="center" width="100">
          <template #default="{ row }"> {{ row.tc029 }} </template>
        </vxe-column>
        <vxe-column title="交易币种" align="center" width="100">
          <template #default="{ row }"> {{ row.tc008 }} </template>
        </vxe-column>
        <vxe-column title="总数量" align="center" width="100">
          <template #default="{ row }"> {{ row.tc031 }} </template>
        </vxe-column>
        <vxe-column title="交货日期" align="center" width="100">
          <template #default="{ row }"> {{ EFTimeFormatConversion(row.tci01) }} </template>
        </vxe-column>
        <vxe-column title="单据日期" align="center" width="100">
          <template #default="{ row }"> {{ EFTimeFormatConversion(row.tc039) }} </template>
        </vxe-column>
        <vxe-column title="付款条件" align="center" width="220">
          <template #default="{ row }"> {{ row.tc014 }} </template>
        </vxe-column>
        <vxe-column title="备注" align="center" width="300">
          <template #default="{ row }"> {{ row.remark }} </template>
        </vxe-column>
        <vxe-column title="操作" align="center" width="120" fixed="right">
          <template #default="{ row }">
            <a-space>
              <a-button size="mini" type="primary" @click="skipDetails(row)">
                <template #icon>
                  <icon-search />
                </template>
                <template #default>查看详情</template>
              </a-button>
            </a-space>
          </template>
        </vxe-column>
      </vxe-table>

      <vxe-pager
        v-model:current-page="pagination.current"
        v-model:page-size="pagination.pageSize"
        background
        :total="pagination.total"
        :layouts="['Home', 'PrevJump', 'PrevPage', 'JumpNumber', 'NextPage', 'NextJump', 'End', 'Sizes', 'FullJump', 'Total']"
      >
      </vxe-pager>
    </a-card>
  </div>
</template>

<script>
import { defineComponent, toRefs } from 'vue';
import importConfig from './salesOrder';
import formButtonGroup from '@com/formButtonGroup/formButtonGroup.vue';
import { EFTimeFormatConversion } from '@utils/baseMethods';
import uploadExcel from '@com/uploadExcel/uploadExcel.vue';

export default defineComponent({
  name: 'OrderDom',
  components: { formButtonGroup, uploadExcel },
  setup() {
    const { base, init, skipSalesDetails, addSalesDetails, reset, skipDetails } = importConfig();
    init();
    return {
      ...toRefs(base),
      skipSalesDetails,
      init,
      addSalesDetails,
      reset,
      EFTimeFormatConversion,
      skipDetails,
    };
  },
});
</script>

<style lang="less" scoped>
:deep(.arco-card-header) {
  border-bottom: none;
}

:deep(.arco-card-header-title) {
  text-align: left;
}

.order {
  &-queryForm {
    &-criteria {
      flex: 1 1 0;
    }

    &-btn {
      border-left: 1px solid #ddd;
      flex: 0 0 86px;
      text-align: right;
    }
  }

  &-table {
    font-weight: 500;
  }

  &-bomxa {
    margin-top: 10px;
    margin-bottom: 10px;
    display: flex;
  }
}
.formHeader {
  &-criteria {
    flex: 1 1 0;
    &-postizz {
      display: flex;
      justify-content: flex-end;
      margin-top: 25px;
    }
  }

  &-btn {
    border-left: 1px solid #ddd;
    flex: 0 0 86px;
    text-align: right;
  }
}
.pollabel {
  font-size: 12px;
  color: #7b7b7b;
  &-value {
    font-size: 14px;
    color: #3e528e;
    font-weight: 900;
    padding-left: 10px;
  }
}

:deep(.arco-upload-list.arco-upload-list-type-text) {
  display: none;
}
</style>
